<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">
        <div style="width: 600px;height:400px;">
            <my-echarst reff='first' :datasss="data1" styless='width:100%;height:100%;'></my-echarst>
        </div>
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second">
        <div style="width: 800px;height:600px;">

        <my-echarst reff='second' :datasss="data2" styless='width: 1000px;height:600px;'></my-echarst>
        </div>
    </el-tab-pane>
    <el-tab-pane label="角色管理" name="third">

        <my-echarst reff='third' :datasss="data3" styless='width: 500px;height:500px;'></my-echarst>
    </el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">
      <router-view></router-view>
      <router-view name="left"></router-view>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
import Bus from '../../Bus'
import myEcharst from './index1223'
export default {
  components: {
    myEcharst
  },
  data () {
    return {
      activeName: 'first',
      data1: [
        { value: 335,
          name: '直接访问',
          label: {
            show: true,
            position: 'center'
          },
          labelLine: {
            show: false,
            length: 50
          },
          itemStyle: {
            borderWidth: 20
          }
        },
        { value: 455, name: '邮件营销' },
        { value: 523, name: '联盟广告' },
        { value: 679, name: '视频广告' },
        { value: 48, name: '搜索引擎' }
      ],
      data2: [
        { value: 125,
          name: '直接访问',
          label: {
            show: true,
            position: 'center'
          },
          labelLine: {
            show: false,
            length: 50
          },
          itemStyle: {
            borderWidth: 20
          }
        },
        { value: 55, name: '邮件营销' },
        { value: 523, name: '联盟广告' },
        { value: 379, name: '视频广告' },
        { value: 428, name: '搜索引擎' }
      ],
      data3: [
        { value: 505,
          name: '直接访问',
          label: {
            show: true,
            position: 'center'
          },
          labelLine: {
            show: false,
            length: 50
          },
          itemStyle: {
            borderWidth: 20
          }
        },
        { value: 143, name: '邮件营销' },
        { value: 923, name: '联盟广告' },
        { value: 179, name: '视频广告' },
        { value: 38, name: '搜索引擎' }
      ]
    }
  },
  methods: {
    handleClick (tab, event) {
    //   console.log(tab, event)
      //   console.log(1)
      Bus.$emit('openEcharst', this.activeName)
    }
  },
  beforeDestory () {
    // console.log(1)
    // Bus.$emit('openEcharst')
    // Bus.$off('openEcharst')
  }
}
</script>
<style lang="less" scoped>

</style>
